<template>
  <div class="panel">
    <el-form
      ref="formRef"
      :model="detail.data"
      class="demo-form-inline"
      label-width="140px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="eventsName" label="活动名称">
            {{ detail.data.eventsName }}
          </el-form-item>
          <el-form-item prop="feeConfigType" label="活动费用配置">
            {{ detail.data.feeConfigType ? '组合' : '单人单宠' }}
            <template v-if="detail.data.feeConfigType">
              <div>
                活动费用（人）：{{ detail.data.feeType/100 }}&nbsp;元/人
              </div>
              <div>
                活动费用（宠物）：{{ detail.data.eventsExpensePet/100 }}&nbsp;元/宠物
              </div>
            </template>
          </el-form-item>
          <el-form-item prop="eventsAddress" label="活动地址">
            <div style="display: flex;">
              <span>{{ detail.data.eventsAddress }}</span>
              <svg t="1688116746869" style="margin-left: 10px;margin-top: 2px;"  @click="detailFn.chooseAddress" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3424" width="30" height="30"><path d="M894.185422 128.023792 129.814578 445.743994 445.99982 577.744353 571.860343 893.929596Z" fill="#299FFF" p-id="3425"></path></svg>
              <!-- <el-icon style="margin-left: 8px;margin-top: 5px; width: 24px;height: 24px;" @click="detailFn.chooseAddress"><Position style="width: 24px;height: 24px" /></el-icon> -->
            </div>
          </el-form-item>
          <el-form-item prop="signUp" label="活动报名时间">
            {{ detail.data.signUpStart }}&nbsp;至&nbsp;
            {{ detail.data.signUpEnd }}
          </el-form-item>
          <el-form-item prop="signUp" label="活动时间">
            {{ detail.data.eventsStartTime }}&nbsp;至&nbsp;
            {{ detail.data.eventsEndTime }}
          </el-form-item>

          <el-form-item prop="sponsor" label="主办单位">
            {{ detail.data.sponsor }}
          </el-form-item>
          <el-form-item prop="undertaker" label="承办单位">
            {{ detail.data.undertaker }}
          </el-form-item>

          <el-form-item prop="surfaceDrawing" label="活动封面图">
            <div
              style="display: inline-block"
              @click="
                detailFn.openImageViewer(
                  [detail.data.surfaceDrawing],
                   0
                )
              "
            >
              <el-image
                style="width: 120px; height: 120px; background-color: #f5f7fa"
                :src="detail.data.surfaceDrawing"
                fit="contain"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item prop="shareImage" label="活动分享图">
            <div
                style="display: inline-block"
                @click="
                detailFn.openImageViewer(
                  [detail.data.shareImage],
                   0
                )
              "
            >
              <el-image
                  style="width: 120px; height: 120px; background-color: #f5f7fa"
                  :src="detail.data.shareImage"
                  fit="contain"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item prop="detailImages" label="活动详情图">
            <div
              style="display: inline-block; margin-right: 12px"
              v-for="(url, index) in detail.data.detailImages"
              :key="index"
              @click="detailFn.openImageViewer(detail.data.detailImages, index)"
            >
              <el-image
                fit="contain"
                style="width: 120px; height: 120px"
                :src="url"
              />
            </div>
            <div
              class="isEmpty"
              v-if="
                !detail.data?.detailImages ||
                !detail?.data?.detailImages?.length
              "
            >
              无
            </div>
          </el-form-item>
          <el-form-item prop="isConfigBiscuit" label="小饼干抵扣">
            {{ detail.data.isConfigBiscuit ? '是' : '否' }}
            <template v-if="detail.data.isConfigBiscuit">
              <div style="margin-top:6px" v-for="(deduction, index) in detail.data.deductionConfigList" :key="index">
                小饼干金额：{{ deduction.biscuitAmount }}，抵扣金额：{{deduction.deductionAmount}}
              </div>
            </template>
          </el-form-item>
          <el-form-item prop="eventsName" label="活动分享配置">
            {{ detail.data.isConfigShare ? '等额计算' : '不配置' }}
            <template v-if="detail.data.isConfigShare">
              单人减免费用：{{detail.data.deductionAmount / 100}}元, 减免上限：{{detail.data.deductionLimitAmount / 100}}元
            </template>
          </el-form-item>
          <el-form-item prop="eventsStatus" label="上线状态">
            <el-switch
              :disabled="true"
              v-model="detail.data.eventsStatus"
              :active-value="'1'"
              :inactive-value="'0'"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详情" prop="detailedInfo">
            <div class="tinymacClass">
              <tinymce
                :disabled="true"
                ref="detailedInfo"
                v-model:value="detail.data.detailedInfo"
                style="width: 100%"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <seeAddress
      v-model="detail.showAddress"
      :mapUrl="detail.mapUrl"
      :latitude="detail.data.latitude"
      :longitude="detail.data.longitude"
    ></seeAddress>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { getEventsInfoDetail } from "@/api/eventsinfo.js";
import imageViewer from "@/components/imageViewer/index2";
import { Position } from "@element-plus/icons-vue";
import seeAddress from "../seeAddress.vue";
import { activityList, getItemFromArray, isLongTime } from "@/utils/tool";
import { ElMessage } from "element-plus";
import Tinymce from "@/components/Tinymce";
import UploadOss from "@/components/AliOSS";

export default {
  name: "eventsInfoDetail",
  components: {
    Tinymce,
    UploadOss,
    seeAddress,
    Position,
  },
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: detail, $fn: detailFn } = detailModule();
    return {
      detail,
      detailFn,
    };
  },
};

function detailModule() {
  const router = useRouter();
  const params = router.currentRoute.value.params;

  const $data = reactive({
    mapUrl: "",
    showAddress: false,
    data: {},
    tagsList: [],
    imageKeys: ["surfaceDrawing","shareImage", "detailImages"],
  });
  const $fn = {
    getDetails() {
      getEventsInfoDetail(params.id).then((res) => {
        if (res.code === 0) {
          $data.data = res.data || {};
        }
      });
    },
    openImageViewer(list, index) {
      imageViewer({ initialIndex: index, urlList: list });
    },
    gotoEdit() {
      router.push(`/activity/acmanage/operate/${params.id}`);
    },
    cancelActivity() {
      cancelActivity(params.id).then((res) => {
        if (res.code === 0) {
          ElMessage.success("取消成功！");
          $fn.getDetails();
        }
      });
    },
    chooseAddress() {
      // $data.mapUrl =
      //   "https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:" +
      //   $data.data.latitude +
      //   "," +
      //   $data.data.longitude +
      //   ";title:" +
      //   $data.data.eventsAddress +
      //   ";addr:" +
      //   $data.data.eventsAddress +
      //   "&key=D3JBZ-IHNEU-4YLV5-B5PMB-B2GG6-WCFPK&referer= 品客";
      // console.log($data.mapUrl);
      $data.showAddress = true;
    },
  };
  $fn.getDetails();
  return {
    $data,
    $fn,
  };
}
</script>

<style scoped lang="scss">
.panel {
  background-color: rgb(255, 255, 255);
  padding: 12px;
  border-radius: 8px;
}
.tinymacClass {
  position: relative;
  left: 0;
  top: 0;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 998;
  pointer-events: none;
}
</style>
